<template>
  <div class="container">
    <div class="zan-panel">
      <div class="zan-row">
        <zanbar v-bind="this.notice" :componentId="'notice'" />
      </div>
    </div>
    <form @submit="formSubmit" bindreset="formReset">
      <div class="zan-panel">
        <div class="zan-row" style="padding-top:5px;padding-bottom:5px;">
          <div class="zan-cell">
            <div class="zan-cell__bd">上传身份证照片：</div>
          </div>
          <!-- <div class="zan-cell zan-field">
            <div class="zan-cell__hd zan-field__title">上传身份证照片：
            </div>
          </div> -->
        </div>
        <div class="zan-row">
          <div class="zan-col zan-col-8 row">
            <img class="img-block" :src="idcardFrontUrl" @error="errorLoadImg('idcardFront')" @click="choose('idcardFront')" @longpress="deleteImg('idcardFront')">
          </div>
          <div class="zan-col zan-col-8 row">
            <img class="img-block" :src="idcardHandUrl" @error="errorLoadImg('idcardHand')" @click="choose('idcardHand')" @longpress="deleteImg('idcardHand')">
          </div>
          <div class="zan-col zan-col-9 row">
            <img class="img-block" :src="idcardBackUrl" @error="errorLoadImg('idcardBack')" @click="choose('idcardBack')" @longpress="deleteImg('idcardBack')">
          </div>
        </div>
      </div>
      <div class="zan-panel">
        <div class="zan-row" style="padding-top:5px;padding-bottom:5px;">
          <div class="zan-cell">
            <div class="zan-cell__bd">保险:</div>
            <div class="zan-cell__ft">
              <switch :checked='hasInsurance' @change="changeInsurance('hasInsurance')" />
            </div>
          </div>
        </div>
        <div class="zan-row" v-if='hasInsurance'>
          <div class="zan-col zan-col-8 row">
            <img class="img-block" :src="insuranceImgUrl" @error="errorLoadImg('insuranceImg')" @click="choose('insuranceImg')">
          </div>
        </div>
        <div class="zan-row" v-if='hasInsurance'>
          <div class="zan-cell zan-cell--access">
            <div class="zan-cell__bd">保险有效日期:</div>
            <div class="zan-cell__ft">
              <picker mode="date" v-model="workerForm.insuranceDate" id="insuranceDate" start="2015-09-01" end="2020-09-01" @change="dateChange">
                <div class="picker">
                  <span v-if="workerForm.insuranceDate == undefined || workerForm.insuranceDate == ''">请选择</span>
                  <span v-else></span>
                  {{workerForm.insuranceDate}}
                </div>
              </picker>
            </div>
          </div>
        </div>
      </div>
      <div class="zan-panel">
        <div class="zan-row" style="padding-top:5px;padding-bottom:5px;">
          <div class="zan-cell">
            <div class="zan-cell__bd">电工证:</div>
            <div class="zan-cell__ft">
              <switch :checked='hasElectrician' @change="changeInsurance('hasElectrician')" />
            </div>
          </div>
        </div>
        <div class="zan-row" v-if='hasElectrician'>
          <div class="zan-col zan-col-8 row">
            <img class="img-block" :src="electricianImgUrl" @error="errorLoadImg('electricianImg')" @click="choose('electricianImg')" @longpress="deleteImg('electricianImg')">
          </div>
        </div>
        <div class="zan-row" v-if='hasElectrician'>
          <div class="zan-cell zan-cell--access">
            <div class="zan-cell__bd">电工证有效日期:</div>
            <div class="zan-cell__ft">
              <picker mode="date" :value="workerForm.electricianDate" id="electricianDate" start="2015-09-01" end="2020-09-01" @change="dateChange">
                <div class="picker">
                  <span v-if="workerForm.electricianDate == undefined || workerForm.electricianDate == ''">请选择</span>
                  <span v-else></span>
                  {{workerForm.electricianDate}}
                </div>
              </picker>
              <!-- <picker mode="date" :value="workerForm.electricianDate" id="electricianDate" start="2015-09-01" end="2020-09-01" @change="dateChange">
                <view class="picker">
                </view>
              </picker> -->
            </div>
          </div>
        </div>
      </div>
      <div class="zan-panel">
        <div class="zan-btns">
          <button class="zan-btn zan-btn--warn" formType="submit">确定</button>
        </div>
      </div>
    </form>
  </div>
</template>
<script>
import App from './index'
import { api } from '@/api/upload'
import { workerApi } from '@/api/worker'
//import { getWorkerAuthById } from '@/api/worker'
import appConfig from '@/appConfig'
import ZanNoticeBar from '../../components/zan/noticebar'
import ZanSwitch from '../../components/zan/switch'

import idcardFrontStatic from '../../../static/image/sfzzm.jpg'
import idcardBackStatic from '../../../static/image/sfzfm.jpg'
import idcardHandStatic from '../../../static/image/scsfz.jpg'
import imgStatic from '../../../static/image/sctp_pic.jpg'

import { chooseImg, uploadImg } from '@/api/upload'
import store from '@/store'
export default {
  components: {
    zanbar: ZanNoticeBar,
    ZanSwitch
  },
  data() {
    return {
      idcardFrontUrl: appConfig.imgUrl,
      idcardHandUrl: appConfig.imgUrl,
      idcardBackUrl: appConfig.imgUrl,
      insuranceImgUrl: appConfig.imgUrl,
      electricianImgUrl: appConfig.imgUrl,
      hasInsurance: false,
      hasElectrician: false,
      notice: {
        text: '上传以下照片,注意保证身份证内容清晰可见',
        animationData: []
      },
      errImgStaticInfo: {
        idcardFront: idcardFrontStatic,
        idcardHand: idcardBackStatic,
        idcardBack: idcardHandStatic,
        insuranceImg: imgStatic,
        electricianImg: imgStatic
      },
      /**
       * 提交表单的内容
       */
      workerForm: {
        id: 160,
        idcardFront: undefined, //身份证正面
        idcardHand: undefined, //身份证手持
        idcardBack: undefined, //身份证背面
        insuranceImg: undefined, //保险照片
        insuranceDate: undefined, //保险有效期
        insuranceType: undefined, //保险类型
        electricianImg: undefined, //电工证照片
        electricianDate: undefined //电工证有效日期
      }
    }
  },
  onShow(){
    this.getWorkerAuthById()
  },
  created() {
    
  },
  methods: {
    ...ZanNoticeBar.methods,
    setRef: function(payload) {
      setTimeout(() => {
        var that = this
        // initScroll的通告栏如果宽度足够显示内容将保持静止
        this.initZanNoticeBarScroll(that, 'notice')
      }, 500)
    },

    getWorkerAuthById() {
      workerApi.getWorkerAuthById({ id: 160 }).then(res => {
        this.workerForm = res.data

        if (
          this.workerForm.electricianImg != undefined &&
          this.workerForm.electricianDate != undefined
        ) {
          this.hasElectrician = true //如果有电工证信息,则将电工证信息展示出来
        }
        if (
          this.workerForm.insuranceImg != undefined &&
          this.workerForm.insuranceDate != undefined
        ) {
          this.hasInsurance = true //如果有保险证信息,则将保险证信息展示出来
        }
        this.idcardFrontUrl = appConfig.imgUrl + this.workerForm.idcardFront
        this.idcardHandUrl = appConfig.imgUrl + this.workerForm.idcardHand
        this.idcardBackUrl = appConfig.imgUrl + this.workerForm.idcardBack
        this.insuranceImgUrl = appConfig.imgUrl + this.workerForm.insuranceImg
        this.electricianImgUrl =
          appConfig.imgUrl + this.workerForm.electricianImg
      })
    },
    /**
     * 选择图片
     */
    choose(name) {
      api.chooseImg(this, name)
    },
    /**
     * 图片加载错误时,默认图片的设置
     */
    errorLoadImg(name) {
      this._data[name + 'Url'] = this.errImgStaticInfo[name]
    },
    changeInsurance(name) {
      this[name] = !this[name]
    },
    dateChange: function(event) {
      console.log(event.mp.detail.value)
      console.log(event.mp.target.id)

      this.workerForm[event.mp.target.id] = event.mp.detail.value
      //this['has' + event.mp.target.id] = true

      console.log(this.workerForm.electricianDate)
    },
    deleteImg(name) {
      var that = this
      console.log('----------长按图片------------')
      api.deleteImg(that,name)
    },
    // // 删除上传的图片
    // deleteImg: function(e) {
    //   var index = e.currentTarget.dataset.index
    //   var imgArr = this.data.imgArr
    //   imgArr.splice(index, 1)
    //   this.setData({
    //     imgArr: imgArr
    //   })
    // },
    /**
     * 修改认证信息
     */
    formSubmit: function() {
      workerApi.updateWorkerAuth(this._data.workerForm).then(res => {
        /**
         * 缺少表单校验
         */
        if (res.code == 0) {
          wx.navigateTo({ url: '../edit/auth' })
        } else {
          wx.showToast({
            title: '网络异常',
            mask: true,
            duration: 1000
          })
        }
      })
    }
  }
}
</script>
<style  scoped>
.container {
  background-color: #fff;
}

.zan-panel {
  background: #fff;
  margin-top: 0rpx;
  overflow: hidden;
}
.row navigator {
  height: 80rpx;
  margin-top: 0rpx;
}
.zan-col {
  text-align: center;
  font-size: 12px;
  color: black;
  width: 187.5px;
}
.authParam {
  display: none;
}
.img-block {
  width: 180px;
  height: 120px;
}
/* .zan-tag{
    margin-left: 93.75px;
}
.zan-tag + .zan-tag {
  padding-left: 93.75px;
} */
/* .zan-col {
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  color: black;
  width: 187.5px;
} */
</style>
